<template>
  <div class="personal-info">
    <van-nav-bar
        title="个人信息"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-cell title="基础信息" style="background-color: #f6f6f6">
      <van-button type="primary" size="mini" style="border-radius: 20px;width: 55px" @click="updateUser()">保存</van-button>
    </van-cell>

    <div style="width: 100%">
      <el-upload
          style="width: 100%;text-align: left"
          class="el-upload"
          action="http://1.94.221.254:9999/api/qcfw-user/upload/fileUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
      >
        <van-cell title="头像" is-link @click="showAvatar=true" style="width: 330%; display: flex; justify-content: space-between;">
          <span> <!-- 这里可以添加其他左边的内容，如果有的话 --> </span>
          <van-image
              round
              width="25px"
              height="25px"
              fit="cover"
              :src="this.user.avatar"
          />
        </van-cell>
      </el-upload>
    </div>

    <van-cell title="昵称" is-link @click="showBottom=true" >
      <!--居右-->
      <span style="float: right;">{{user.name}}</span>
    </van-cell>
    <el-dialog
        title="修改昵称"
        :visible.sync="showBottom"
        width="50%"
        >
      <el-input v-model="user.name"></el-input>
    </el-dialog>
    <van-cell title="生日" is-link @click="birthdayShow=true">
      <span style=" float: right;">{{user.birthday}}</span>
    </van-cell>
    <van-popup
        closeable
        v-model:show="birthdayShow"
        position="bottom"
        :style="{ height: '30%' }"
    >
      <el-date-picker
          style="margin-left: 30%;margin-top: 10%"
          v-model="user.birthday"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
      </el-date-picker>
    </van-popup>
    <br>
    <van-cell @click="dizhi()" title="地址管理" is-link/>
    <van-cell title="修改密码" is-link @click="passWordShow=true">
    </van-cell>
      <van-popup
          v-model:show="passWordShow"
          position="bottom"
          :style="{ height: '40%' }"
      >
        <h3 style="margin-right: 45%;color: black;margin-top: 15px">修改密码</h3>
        <el-form :model="user" label-width="80px">
          <el-form-item label="旧密码">
            <el-input style="width: 80%;margin-right: 50%" v-model="userPass.oldPassword"  show-password type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input style="width: 80%;margin-right: 50%" v-model="userPass.newPassword"  show-password type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input style="width: 80%;margin-right: 50%" v-model="userPass.confirmPassword"  show-password type="password"></el-input>
          </el-form-item>
          <div style="margin-left: 50px">
            <van-button style="width: 85%;margin-right: 15%;height: 30px;border-radius: 15px" type="primary" size="mini" @click="submitForm">保存</van-button>
          </div>
        </el-form>
      </van-popup>
    <van-cell title="手机号" is-link>
      <span style="float: right;">暂未绑定手机号</span>
    </van-cell>
    <br>

    <br>
    <br>
    <van-cell style="border: 2px solid #966d6c;border-radius: 20px;width: 95%;margin-left: 12px;text-align: center;" @click="loginOut()">
      <span style="margin-left: 40%;color: #966d6c" >退出登录</span>
    </van-cell>
  </div>
</template>

<script>
import axios from 'axios';
import {findUserById, UpdatePassWord, updateUser} from "@/api/wode/user";
import {ref} from "vue";
export default {

  data() {
    return {
      showBottom: false,
      user:{},
      birthdayShow:false,
      passWordShow:false,
      userPass:{},
      showAvatar:false,
      //
    }
  },
  created() {
    this.findUserById()
  },
  methods: {
    updateUser(){
      console.log(this.user)
      updateUser(this.user).then(res=>{
        this.$message.success("修改成功")
      })
    },
    handleAvatarSuccess(res, file) {
      console.log(URL.createObjectURL(file.raw));
      console.log(res);
      this.user.avatar=res.data;
      console.log(this.user.avatar);
    },
    onClickLeft() {
      this.$router.push('/wode')
    },
    dizhi(){
      this.$router.push('/address')
    },
    findUserById(){
      findUserById(localStorage.getItem("token")).then(res => {
        this.user = res.data
        if (res.code == 208){
          this.$message.warning(res.message)
          localStorage.removeItem("token")
          this.$router.push('/')
        }
      }).catch(error => {
        console.log(error)
      });
    },
    submitForm(){
      this.userPass.id=this.user.id
      if (this.userPass.oldPassword!==this.user.password){
        this.$message.warning('旧密码错误')
      }else if (this.userPass.newPassword!==this.userPass.confirmPassword){
        this.$message.warning('新密码和确认新密码不一致')
      }else {
        UpdatePassWord(this.userPass).then(res=>{
          this.passWordShow=false
          this.$message.success("修改密码成功")
        })
      }
    },
    loginOut(){
      console.log(111111)
      localStorage.removeItem("token")
      this.$message.success("退出成功")
      this.$router.push('/')
    },
  },
  // savePhone() {
  //   // 这里添加保存手机号的逻辑
  //   this.showPhonePopup = false;
  // },
  // unbindWechat() {
  //   // 这里添加解绑微信的逻辑
  // },
  // unbindWechatMiniProgram() {
  //   // 这里添加解绑微信小程序的逻辑
  // }
}
</script>

<style scoped>
.personal-info {
  width: 80%;
  margin: auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
}

.info-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.edit-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}

.popup-basic-info,
.popup-avatar,
.popup-nickname,
.popup-birthday,
.popup-address,
.popup-password,
.popup-phone {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.popup-basic-info h3,
.popup-avatar h3,
.popup-nickname h3,
.popup-birthday h3,
.popup-address h3,
.popup-password h3,
.popup-phone h3 {
  margin-top: 0;
}

.arrow-right {
  margin-left: auto;
  cursor: pointer;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.avatar-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.third-party-account {
  display: flex;
  align-items: center;
}

.third-party-img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.logout-button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
}
.el-upload{
  width: 100%;
}
.el-upload.el-upload--text{
  width: 100%;
}
</style>
